<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跑者天地 - 登录</title>
    <link rel="stylesheet" href="css/css/all.min.css">
    <link rel="stylesheet" href="css/login.css">
</head>
<body>
<!-- 背景装饰元素 -->
<div class="decoration decoration-1"></div>
<div class="decoration decoration-2"></div>
<div class="decoration decoration-3"></div>

<!-- 导航栏 -->
<nav class="nav">
    <a href="#" class="logo">
        <i class="fas fa-running"></i>
        <span>跑者天地</span>
    </a>
</nav>

<!-- 主要内容区 -->
<div class="container">
    <div class="welcome-text">
        <h1>欢迎回到<span>跑者天地</span></h1>
        <p>加入百万跑者社区，分享你的跑步故事，获取专业训练建议，参与精彩赛事活动。</p>

        <div class="features">
            <div class="feature">
                <i class="fas fa-route"></i>
                <span>跑步路线分享</span>
            </div>
            <div class="feature">
                <i class="fas fa-trophy"></i>
                <span>赛事活动报名</span>
            </div>
            <div class="feature">
                <i class="fas fa-users"></i>
                <span>跑友社区互动</span>
            </div>
            <div class="feature">
                <i class="fas fa-chart-line"></i>
                <span>训练数据分析</span>
            </div>
        </div>
    </div>

    <!-- 登录对话框 -->
    <div class="login-dialog">
        <h3>用户登录</h3>

        <div class="row">
            <span><i class="fas fa-user"></i> 用户名</span>
            <input type="text" id="username" placeholder="请输入用户名或手机号">
            <i class="fas fa-user input-icon"></i>
        </div>

        <div class="row">
            <span><i class="fas fa-lock"></i> 密码</span>
            <input type="password" id="password" placeholder="请输入密码">
            <i class="fas fa-eye input-icon" id="togglePassword"></i>
        </div>

        <div class="row">
            <span><i class="fas fa-shield-alt"></i> 验证码</span>
            <div id="confirm">
                <input type="text" id="inputCaptcha" placeholder="请输入验证码">
                <div id="verificationCodeImg">A3F8</div>
            </div>
            <div class="captcha-hint">点击验证码刷新</div>
        </div>

        <div class="options">
            <div class="remember-me">
                <input type="checkbox" id="remember">
                <label for="remember">记住我</label>
            </div>
        </div>

        <div class="row">
            <button id="submit">登录</button>
        </div>

        <div class="row">
            <a href="register.html">
                <button type="button" class="register-button">注册新账号</button>
            </a>
        </div>
    </div>
</div>

<!-- 页脚 -->
<div class="footer">
    © 2023 跑者天地论坛 - 专业的跑步交流社区 | 让每一步都有意义
</div>

<!-- 跑步图标 -->
<div class="runner-icon">
    <i class="fas fa-running"></i>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/common.js"></script>
<script>
    // 切换密码可见性
    document.getElementById('togglePassword').addEventListener('click', function() {
        const passwordInput = document.getElementById('password');
        const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
        passwordInput.setAttribute('type', type);
        this.classList.toggle('fa-eye');
        this.classList.toggle('fa-eye-slash');
    });

    // 刷新验证码
    document.getElementById('verificationCodeImg').addEventListener('click', function() {
        const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789';
        let result = '';
        for (let i = 0; i < 3; i++) {
            result += chars.charAt(Math.floor(Math.random() * chars.length));
        }
        this.textContent = result;
    });

    // 初始化验证码
    document.getElementById('verificationCodeImg').click();

    // 登录功能
    document.getElementById('submit').addEventListener('click', function() {
        const username = document.getElementById('username').value.trim();
        const password = document.getElementById('password').value;
        const captcha = document.getElementById('inputCaptcha').value.trim();
        const captchaCode = document.getElementById('verificationCodeImg').textContent;

        if (!username) {
            alert('请输入用户名');
            return;
        }

        if (!password) {
            alert('请输入密码');
            return;
        }

        if (!captcha) {
            alert('请输入验证码');
            return;
        }

        if (captcha.toUpperCase() !== captchaCode) {
            alert('验证码错误，请重新输入');
            document.getElementById('verificationCodeImg').click();
            document.getElementById('inputCaptcha').value = '';
            return;
        }


        $.ajax({
            type: "POST",
            url: "/user/login",
            dataType: "json", // 明确指定响应类型
            data: {
                username: username,
                password: password
            },
            success: function(loginResponse) {

                console.log(loginResponse)
                // 使用不同变量名
                if (loginResponse.code === "SUCCESS" && loginResponse.data) {
                    localStorage.setItem("user_token", loginResponse.data);
                    location.assign("index.html");
                } else {
                    alert("账号或密码错误");
                }
            },
            error: function(xhr) {
                console.error("登录请求失败", xhr);
                alert("检查输入信息是否合法");
            }
        });

    });
</script>
</body>
</html>